<template>
	<view class="main">
		<u-navbar :is-back="false" :border-bottom="false" title-color="#ffffff" title="人民放映" :background="background"></u-navbar>
		<view class="header">
			<view class="top"><view class="share" :class="{ active: isLike }" @click="follow"></view></view>
			<view class="btm">
				<view class="avatar" @click="getinfo()">
					<image :src="userInfo.ico" mode=""></image>
					<view class="ico"></view>
				</view>
				<view class="info">
					<view class="title">
						<view class="name">{{ userInfo.nickname }}</view>
						<!-- <text class="icon" v-show="userInfo.level"></text>
						<text v-show="userInfo.level">{{userInfo.level}}</text> -->
					</view>
					<view class="des">个人介绍：{{ userInfo.introduce || '暂无' }}</view>
				</view>
			</view>
		</view>
		<view class="Tag">
			<view class="item">
				<view class="title">{{ dianYingNum }}</view>
				<view class="des">组织点映</view>
			</view>
			<view class="item">
				<view class="title">{{ baoChangNum }}</view>
				<view class="des">组织包场</view>
			</view>
			<view class="item">
				<view class="title">{{ guanYingNum }}</view>
				<view class="des">观影</view>
			</view>
			<view class="item">
				<view class="title">{{ inviteNum }}</view>
				<view class="des">邀清好友</view>
			</view>
			<view class="item">
				<view class="title">{{ invitePayNum || 0 }}</view>
				<view class="des">好友购票</view>
			</view>
		</view>
		<view class="tab_nav">
			<view class="item" :class="{ active: active == 0 }" @click="TabClick(0)">包场历史</view>
			<view class="item" :class="{ active: active == 1 }" @click="TabClick(1)">观影足迹</view>
			<view class="item" :class="{ active: active == 2 }" @click="TabClick(2)">点映场</view>
		</view>
		<view class="content" v-show="active == 0">
			<view class="item" v-for="item in list" :key="item.id" >
				<block v-if="item.type == 1 ">
				<view class="cover"><image :src="item.icoImg" mode=""></image></view>
				<view class="cont">
					<view class="left" style="width: calc(100% - 10rpx);">
						<view class="title">{{ item.title }}</view>
						<!-- <view class="rate">
							<u-rate size="20" disabled gutter='5' :count="count" v-model="value" active-color="#FFD100" inactive-color="#FFD100"></u-rate>
							<text>4.0</text>
						</view> -->
						<view class="des">包场类型：{{ item.type == 1 ? '影院包场' : item.type == 2 ? '私人定制' : '单位定制' }}</view>
						<view class="des" v-if="item.type==1">
							影院名称：{{item.cinemaName}}人
						</view>	
						<view class="des" v-if="item.type==1">
								影厅名称：{{item.hallName}}人
						</view>
						<view class="des">观影人数：{{ item.num }}人</view>
						<!-- <view class="des" v-if="item.company">单位名称：{{ item.company }}</view> -->
						<view class="des">包场时间：{{ item.starttime }}</view>
						
					</view>
					<!-- <view class="right">
						<view class="ico"></view>
						<view class="btn active">已评论</view>
					</view> -->
				</view>
				</block>
			</view>
		</view>
		<view class="content" v-show="active == 1">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="cover"><image :src="item.icoImg" mode=""></image></view>
				<view class="cont">
					<view class="left">
						<view class="title">{{ item.mvName }}</view>
						<view class="rate">
							<!-- <u-rate size="20" disabled gutter='5' :count="count" v-model="item.star" active-color="#FFD100" inactive-color="#FFD100"></u-rate> -->

							<u-rate active-color="#FFD100" size="20" :current="item.score * 0.5" :disabled="true"></u-rate>
							<text>{{ item.score }}</text>
						</view>
						<view class="des">导演：{{ item.director }}</view>
						<view class="des">片长：{{ item.duration }}分钟</view>
						<view class="des" v-if="item.company">观影时间：{{ item.time }}</view>
						<view class="des">观影影院：{{ item.mvName }}</view>
					</view>
					<!-- <view class="right">
						<view class="ico"></view>
						<view class="btn active">已评论</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="content" v-show="active == 2">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="cover"><image :src="item.icoImg" mode=""></image></view>
				<view class="cont">
					<view class="left">
						<view class="title">{{ item.title }}</view>
						<!-- <view class="rate">
							<u-rate size="20" disabled gutter='5' :count="count" v-model="value" active-color="#FFD100" inactive-color="#FFD100"></u-rate>
							<text>4.0</text>
						</view> -->
						<view class="des">影院：{{ item.cinemaName }}</view>
						<view class="des">影厅：{{ item.hallName }}</view>
						<view class="des">观影时间：{{ item.starttime }}</view>
						<view class="des">影院地址：{{ item.cinemaAddress }}</view>
					</view>
					<view class="right">
						<view class="type" v-if="(item.maxNum == item.payNum) != 0">已满场</view>
						<view v-else class="type">正在点映</view>

						<view v-if="item.maxNum!=item.payNum" class="btns">
							<u-button type="error" @click="goToPage(item.id)">分享</u-button>
							</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loadmore"><u-loadmore :status="status" /></view>
		<Nav :current="navActive"></Nav>

		<u-popup v-model="shows" closeable width="80%" length="80%" border-radius="15" mode="bottom" :mask-close-able="false">
			<view class="content">
				<view class="title">用户信息</view>
				<!-- （用户ID、昵称、性别、生日、城市、介绍、微信二维码） -->
				<view class="forms">
					<view class="lable">
						<view class="item-txt">用户ID</view>
						<view class="item-info">{{ userInfo.id }}</view>
					</view>

					<view class="lable">
						<view class="item-txt">用户昵称</view>
						<view class="item-info">{{ userInfo.nickname }}</view>
					</view>
					<view class="lable">
						<view class="item-txt">性别</view>
						<view class="item-info">{{ userInfo.sex == 0 ? '女' : userInfo.sex == 1 ? '男' : '保密' }}</view>
					</view>

					<view class="lable">
						<view class="item-txt">生日</view>
						<view class="item-info">{{ userInfo.birthdate || '保密' }}</view>
					</view>

					<view class="lable">
						<view class="item-txt">城市</view>
						<view class="item-info">{{ userInfo.district || '保密' }}</view>
					</view>

					<view class="lable">
						<view class="item-txt">介绍</view>
						<view class="item-info">{{ userInfo.introduce || '暂无' }}</view>
					</view>

					<view class="lable">
						<view class="item-txt">微信二维码</view>

						<view class="item-img" v-if="userInfo.wxImg"><image :src="userInfo.wxImg" mode="aspectFill" @click="Big(userInfo.wxImg)"></image></view>
						<view class="item-info" v-else>暂无</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import Nav from '../../component/Nav.vue';
export default {
	components: {
		Nav
	},
	data() {
		return {
			id: '',
			userInfo: {},
			show: false,
			active: 0,
			navActive: -1,
			background: {
				background: 'linear-gradient(157deg, #EF5737 0%, #EF3C37 100%)'
			},
			count: 5,
			pageNum: 1, //当前页码
			pageSize: 10, //每页数量
			total: 0, //数据总量
			list: [], //电影列表
			isLike: false, //判断是否关注
			MyInfo: [],
			baoChangNum: 0,
			dianYingNum: 0,
			guanYingNum: 0,
			inviteNum: 0,
			invitePayNum: 0,
			teamInfo: '',
			shows: false
		};
	},
	onLoad(e) {
		console.log(e);
		this.id =e.id;
		uni.setStorage({
			key: 'InvitedCode',
			data: e.id,
			success: function() {
				console.log('success');
			}
		});
	},
	onShow() {
		try {
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.MyInfo = userInfo;
			}
		} catch (e) {
			// error
		}
		this.list = [];
		this.pageNum = 1;
		if (this.active == 0) {
			this.CharteredList();
		}
		if (this.active == 1) {
			this.MySeeList();
		}
		if (this.active == 2) {
			this.InitiateList();
		}
		this.FollowStatus();
		this.getUserInfo();
	},
	onPullDownRefresh() {
		this.getUserInfo();
		this.list = [];
		this.pageNum = 1;
		if (this.active == 0) {
			this.CharteredList();
		}
		if (this.active == 1) {
			this.MySeeList();
		}
		if (this.active == 2) {
			this.InitiateList();
		}
		this.FollowStatus();
	},
	onReachBottom() {
		if (Math.ceil(this.total / this.pageSize) > this.pageNum) {
			this.pageNum = this.pageNum + 1;
			if (this.active == 0) {
				this.CharteredList();
			}
			if (this.active == 1) {
				this.MySeeList();
			}
			if (this.active == 2) {
				this.InitiateList();
			}
		} else {
		}
	},
	methods: {
		goToPage(e) {
			uni.navigateTo({
					url:`/pages/SessionDetail/index?userId=${this.id}&dyId=${e}`
			})
		
		},
		getinfo() {
			this.shows = true;
		},
		Big(e) {
			uni.previewImage({
				urls: [e] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			});
		},
		// 统计
		getMyData() {
			this.$http({
				url: this.$api.getMyData,
				method: 'GET',
				hideLoading: true,
				data: {
					uid: this.userInfo.id
				},
				success: res => {
					console.log('统计---------', res);
					this.baoChangNum = res.data.baoChangNum;
					this.dianYingNum = res.data.dianYingNum;
					this.guanYingNum = res.data.guanYingNum;
					this.inviteNum = res.data.inviteNum;
					this.invitePayNum = res.data.invitePayNum;
				},
				complete: e => {
					uni.stopPullDownRefresh();
				}
			});
		},
		follow() {
			if (this.isLike) {
				this.NoFollow();
			} else {
				this._follow();
			}
		},
		_follow() {
			if(this.id!=this.MyInfo.id){
			this.$http({
				url: this.$api.followCreateObj,
				method: 'POST',
				hideLoading: true,
				data: {
					tid: this.id,
					type: 1,
					uid: this.MyInfo.id
				},
				success: res => {
					console.log('喜欢----------', res);
					uni.showToast({
						title: '已关注',
						duration: 2000,
						icon: 'none'
					});
					this.isLike = true;
				},
				complete: e => {}
			});
			}else{
				uni.showToast({
					title: '自己不能关注自己',
					duration: 2000,
					icon: 'none'
				});
			}
		},
		// 取消喜欢
		NoFollow() {
			if(this.id!=this.MyInfo.id){
			this.$http({
				url: this.$api.deleteMvFollow,
				method: 'GET',
				hideLoading: true,
				data: {
					xid: this.id,
					type: 1,
					uid: this.MyInfo.id
				},
				success: res => {
					console.log('不喜欢----------', res);
					uni.showToast({
						title: '已取关',
						duration: 2000,
						icon: 'none'
					});
					this.isLike = false;
				},
				complete: e => {}
			});
			}else{
				
			}
		},
		// 判断是否喜欢
		FollowStatus() {
			if(this.id!=this.MyInfo.id){
			this.$http({
				url: this.$api.getMvFollowStatus,
				method: 'GET',
				isGo: false,
				hideLoading: true,
				data: {
					xid: this.id,
					type: 1,
					uid: this.MyInfo.id
				},
				success: res => {
					console.log('是否喜欢----------', res);
					this.isLike = res.data;
				},
				complete: e => {}
			});
			}
		},
		// 观影记录
		MySeeList() {
			this.status = 'loading';
			this.$http({
				url: this.$api.getMySee,
				method: 'GET',
				hideLoading: true,
				data: {
					status: 2,
					type: 1,
					uid: this.id,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				},
				success: res => {
					console.log(res);
					this.total = Number(res.ext);
					if (Math.ceil(this.total / this.pageSize) <= this.pageNum) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					this.list = this.list.concat(res.data);
					console.log(this.list);
				},
				fail: err => {
					this.status = 'nomore';
				},
				complete: e => {
					uni.stopPullDownRefresh();
					if (!e.code) {
						this.status = 'nomore';
					}
				}
			});
		},
		// 包场列表
		CharteredList() {
			this.status = 'loading';
			this.$http({
				url: this.$api.getStatusList,
				method: 'GET',
				hideLoading: true,
				data: {
					type: 1,
					uid: this.id,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				},
				success: res => {
					console.log(res);
					this.total = Number(res.ext);
					if (Math.ceil(this.total / this.pageSize) <= this.pageNum) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					this.list = this.list.concat(res.data);
					console.log(this.list);
				},
				fail: err => {
					this.status = 'nomore';
				},
				complete: e => {
					uni.stopPullDownRefresh();
					if (!e.code) {
						this.status = 'nomore';
					}
				}
			});
		},
		//点映列表
		InitiateList() {
			this.status = 'loading';
			this.$http({
				url: this.$api.dianyinggetStatusList,
				method: 'GET',
				hideLoading: true,
				data: {
					type: 2,
					uid: this.id,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				},
				success: res => {
					console.log(res);
					this.total = Number(res.ext);
					if (Math.ceil(this.total / this.pageSize) <= this.pageNum) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					this.list = this.list.concat(res.data);
					console.log(this.list);
				},
				fail: err => {
					this.status = 'nomore';
				},
				complete: e => {
					uni.stopPullDownRefresh();
					if (!e.code) {
						this.status = 'nomore';
					}
				}
			});
		},
		// 获取用户信息
		getUserInfo() {
			this.$http({
				url: this.$api.getMvUserDetail,
				method: 'GET',
				hideLoading: true,
				isGo: false,
				data: {
					id: this.id
				},
				success: res => {
					this.userInfo = res.data;
					console.log('用户信息----------', this.userInfo);
					this.getMyData();
				},
				fail: err => {},
				complete: e => {
					uni.stopPullDownRefresh();
				}
			});
		},
		// 跳转
		ToPage(e) {
			console.log('点击跳转', e);
			uni.navigateTo({
				url: `/pages${e}`
			});
		},
		// 打开菜单
		openMenu() {
			this.show = true;
		},
		// 切换列表
		TabClick(e) {
			this.active = e;
			this.list = [];
			this.pageNum = 1;
			if (this.active == 0) {
				this.CharteredList();
			}
			if (this.active == 1) {
				this.MySeeList();
			}
			if (this.active == 2) {
				this.InitiateList();
			}
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	.header {
		background: linear-gradient(157deg, #ef5737 0%, #ef3c37 100%);
		padding: 26rpx 36rpx 86rpx 36rpx;
		.top {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.menu {
				width: 30rpx;
				height: 24rpx;
				background: url(../../static/icon/menu.png) center center no-repeat;
				background-size: 100%;
			}
			.share {
				width: 36rpx;
				height: 38rpx;
				// background: url(../../static/icon/u_love.png) center center no-repeat;
				background-size: 100%;
			}
			.share.active {
				// background: url(../../static/icon/u_loves.png) center center no-repeat;
				background-size: 100%;
			}
		}
		.btm {
			display: flex;
			align-items: center;
			margin-top: 34rpx;
			.avatar {
				width: 110rpx;
				height: 110rpx;
				position: relative;
				image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					background: #fffcfc;
					border: 1px solid #fff;
					box-shadow: 0rpx 4rpx 8rpx 0rpx #f7e6e6;
				}
				.ico {
					border-radius: 50%;
					padding: 15rpx;
					background: #ffffff url(../../static/icon/man.png) center center no-repeat;
					background-size: 18rpx;
					position: absolute;
					right: 5rpx;
					bottom: 5rpx;
				}
			}
			.info {
				margin-left: 16rpx;
				.title {
					display: flex;
					align-items: center;
					.name {
						font-size: 32rpx;
						font-weight: 600;
						color: #ffffff;
						line-height: 44rpx;
						letter-spacing: 1rpx;
					}
					.icon {
						width: 28rpx;
						height: 28rpx;
						background: #ffffff url(../../static/icon/member.png) center center no-repeat;
						background-size: 28rpx 26rpx;
						padding: 15rpx;
						border-radius: 50%;
						margin: 0 10rpx 0 20rpx;
					}
					text {
						font-size: 20rpx;
						font-weight: 400;
						color: #ffffff;
						line-height: 28rpx;
					}
				}
				.des {
					margin-top: 20rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #ffffff;
					line-height: 28rpx;
				}
			}
		}
	}
	.Tag {
		position: relative;
		top: -48rpx;
		left: 28rpx;
		width: calc(100% - 56rpx);
		padding: 30rpx 38rpx 34rpx 30rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #f7e6e6;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.item {
			text-align: center;
			.title {
				font-size: 28rpx;
				font-weight: 600;
				color: #000000;
				line-height: 40rpx;
			}
			.des {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
			}
		}
	}
	.tab_nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 106rpx;
		.item {
			font-size: 28rpx;
			font-weight: 400;
			color: #999990;
			line-height: 40rpx;
			position: relative;
		}
		.active {
			font-weight: 600;
			color: #222222;
		}
		.active::after {
			content: '';
			width: 32rpx;
			height: 6rpx;
			background: #ef3c37;
			border-radius: 3rpx;
			position: absolute;
			left: calc(50% - 16rpx);
			bottom: -8rpx;
		}
	}
	.content {
		.item {
				display: flex;
				align-items: center;
				padding:10rpx 28rpx;
				margin-top: 14rpx;
				margin-bottom: 30rpx;
				border-radius: 8rpx;
				height: 300rpx;
				box-shadow: 0rpx 4rpx 8rpx 0rpx #e0dbdb;
				.cover{
					height: 250rpx;
					width: 180rpx;
					margin-right: 26rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
				.cont{
					width: calc(100% - 178rpx);
					display: flex;
					height: 95%;
					justify-content: space-between;
					align-items: flex-end;
					position: relative;					
					.right{
						.type{
							width: 102rpx;
							position: absolute;
							right: 0;
							top:0;
							font-size: 22rpx;
							font-weight: 600;
							color: #EF3C37;
							line-height: 32rpx;
						}
						.ico{
							width: 100rpx;
							height: 100rpx;
							background: url(../../static/icon/end.png)center center no-repeat;
							background-size: 100rpx;
							position: absolute;
							right: 0rpx;
							top:0;
						}
						.btn{
							height: 48rpx;
							border-radius: 24rpx;
							border: 1rpx solid #EF3C37;
							text-align: center;
							font-size: 20rpx;
							font-weight: 400;
							color: #EF3C37;
							line-height: 48rpx;
							padding:0 15rpx;
						}
						.btn.active{
							width: 104rpx;
							border: 0;
							background: #CDCDCD;
							color: #FFFFFF;
						}
						.btns{
							/deep/button{
							width: 98rpx;
							height: 48rpx;
							border-radius: 8rpx;
							border: 1rpx solid #EF3C37;
							text-align: center;
							font-size: 20rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 48rpx;}
						}
					}
					.left{
						width: calc(100% - 140rpx);
						display: flex;
						justify-content: space-between;
						height: 100%;
						flex-direction: column;
						.title{
							font-size: 28rpx;
							font-weight: 600;
							color: #000000;
							letter-spacing: 1rpx;
							text-align: left;
						}
						.rate{
							margin-bottom: 16rpx;
							text{
								font-size: 20rpx;
								font-weight: 600;
								color: #FF9120;
								line-height: 28rpx;
							}
						}
						.des{
							font-size: 20rpx;
							font-weight: 400;
							color: #44444F;
							line-height: 28rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
				}
	}
	.menu_cont {
		padding: 210rpx 68rpx 0 68rpx;
		.info {
			.name {
				font-size: 40rpx;
				font-weight: 600;
				color: #222222;
				line-height: 56rpx;
			}
			.des {
				background: url(../../static/icon/member.png) left center no-repeat;
				background-size: 28rpx 24rpx;
				padding-left: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #2a303c;
				line-height: 34rpx;
			}
		}
		.m_nav {
			.item {
				background: url(../../static/icon/mico_1.png) left center no-repeat;
				background-size: 32rpx 34rpx;
				padding-left: 64rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #222222;
				line-height: 40rpx;
				margin-top: 66rpx;
			}
			.item:nth-child(2) {
				// background: url(../../static/icon/mico_2.png) left center no-repeat;
				background-size: 32rpx 34rpx;
			}
			.item:nth-child(3) {
				// background: url(../../static/icon/mico_3.png) left center no-repeat;
				background-size: 32rpx 34rpx;
			}
			.item:nth-child(4) {
				// background: url(../../static/icon/mico_4.png) left center no-repeat;
				background-size: 32rpx 34rpx;
			}
			.item:nth-child(5) {
				// background: url(../../static/icon/mico_5.png) left center no-repeat;
				background-size: 32rpx 34rpx;
			}
			.item:nth-child(6) {
				// background: url(../../static/icon/mico_6.png) left center no-repeat;
				background-size: 32rpx 34rpx;
			}
			.item:nth-child(7) {
				// background: url(../../static/icon/mico_7.png) left center no-repeat;
				background-size: 32rpx 34rpx;
			}
			.item:nth-child(8) {
				// background: url(../../static/icon/mico_8.png) left center no-repeat;
				background-size: 32rpx 34rpx;
			}
			.item:nth-child(9) {
				// background: url(../../static/icon/mico_9.png) left center no-repeat;
				background-size: 32rpx 34rpx;
			}
		}
	}
	.loadmore {
		margin: 30rpx auto;
	}
	.content {
		padding: 20rpx 10rpx;
		.title {
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}
		.forms {
			margin: 10rpx;
			.lable {
				font-size: 26rpx;
				margin: 20rpx 0;
				display: flex;
				padding: 20rpx 22rpx;
				.item-txt {
					font-size: 30rpx;
					color: #373737;
					width: 180rpx;
					padding: 0rpx 0 10px;
					
				}
				.item-info {
					color: #000000;
					flex: 1;
					margin: 0 20rpx;
					padding: 0rpx 0 0px;
					border-bottom: 1px solid #f8f8f8;
				}
				.item-img {
					height: 250rpx;
					width: 250rpx;
					image {
						height: 250rpx;
						width: 250rpx;
					}
				}
			}
		}

		.bottm {
			width: 500rpx;
			height: 80rpx;
			background: #ef3c37;
			border-color: #ef3c37;
			box-shadow: 0px 1px 3px 0px #f69c9a;
			font-size: 36rpx;
			font-weight: 400;
			color: #ffffff;
			letter-spacing: 0.5px;
			margin-bottom: 10px;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 30rpx;
			margin-left: -250rpx;
			left: 50%;
		}
	}
}
</style>
